<template>
  <div class="sdk-map-content">
    <div class="map-content" id="map"></div>
  </div>
</template>

<script>
import xMaps from "x-maps";
import "x-maps/xMaps.css";

window.xMaps = xMaps;
export default {
  data() {
    return {
      code: "",
      options: {
        center: [122, 30],
        zoom: 8,
        id: "map",
        minZoom: 4,
        maxZoom: 18,
        mouseCenter: [122, 30],
      },
      map: null,
    };
  },
  methods: {
    codeRun(code) {
      this.code = code;
      try {
        setTimeout(() => {
          eval(code);
        }, 0.2 * 1000);
      } catch {
        this.$message.error("语法存在错误，请检查你的代码");
      }
    },
  },
  mounted() {
    this.map = new xMaps();
    this.map.initMap(this.options);
  },
};
</script>

<style scoped lang="scss">
.sdk-map-content {
  width: 100%;
  height: 100%;
  position: relative;
  .map-content {
    width: 100%;
    height: 100%;
    background-color: #a3ccff;
  }
}
</style>
